<template>
    <div class="">
        <div class="mar_t10 ba_f outmain">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>签到统计</span>
                </div>
            </div>
            <div class="flex-bet">
                <div class="bflex-6">
                    <div class="pad_20">
                        <p class="title6 fon_14 wei">近15日签到用户趋势</p>
<!--                        <p class="fon_30 title35 lh16 pad_tb_20">{{jeData.todayPayMoney}}</p>-->
<!--                        <p class="fon_12 title6 lh25">昨日全天：{{jeData.yesPayMoney}}</p>-->
                    </div>
                    <div id="shujuEch" style="height: 300px;width: 100%"></div>
                </div>
                <div class="bflex-4 pad_t_30">
                    <div class="flex pad_20">
                        <div class="flex-g-1 flex">
                            <div>
                                <p class="title6 fon_14 wei">今日签到次数</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.todayCount}}</p>
                            </div>
                        </div>
                        <div class="flex-g-1 flex">
                            <div>
                                <p class="title6 fon_14 wei">总签到次数</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.userCount}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex pad_20 wid">
                        <div class="flex-g-1 flex wid50">
                            <div>
                                <p class="title6 fon_14 wei">总签到用户数</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.count}}</p>
                            </div>
                        </div>
                        <div class="flex-g-1 flex wid50">
                            <div>
                                <p class="title6 fon_14 wei">人均签到次数</p>
                                <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.fen}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 pad_20 ba_f outmain">
            <div class="shuju_title">
                <div class="shuju_title_text">
                    <span>周期数据</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet">
                <div class="flex-g-1">
                    <div class="mar_t10 shuju_table">
                        <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="days"
                                    label="日期"
                            >
                            </el-table-column>
                            <el-table-column
                                    prop="count"
                                    label="签到用户数"
                            >
                            </el-table-column>
                            >
                            <el-table-column
                                    prop="newUser"
                                    label="新签到用户数">
                            </el-table-column>
                            <el-table-column
                                    prop="money"
                                    label="操作">
                                <template slot-scope="scope">
                                    <div class="flex">
                                        <el-button type="text" @click="handleEdit2(scope.row)">详细</el-button>
                                        <el-button type="text" @click="handleDelete(scope.row)">导出</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="page.total"
                                :page-size="page.pagesize"
                                :current-page.sync='page.currentPage'
                                @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import echarts from "echarts";
    import {signCensus} from "@/api/plug";
    export default {
        mounted() {
            this.bus.$emit('loading', true);
            this.init();
        },
        created() {
            // this.form.shopValue = this.market[0].id
            // this.options = this.market
        },
        data() {
            return {
                tableData: [],
                tableData2: [],
                zhData:{
                    userCount:'',
                    todayCount:'',
                    fen:'',
                    count:'',
                },
                list: [],
                listLoading: false,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                echarts1_option: {
                    color: ['#4284ED', '#42CCF0'],
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['15日签到图']
                    },
                    grid: {
                        left: '3%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '10'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: [1,2,3,4,5,6,7,8,8,10],
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true
                        }
                    },
                    series: [
                        {
                            name: '15日签到图',
                            type: 'bar',
                            data: [1,2,3,4,5,6,7,8,9,10]
                        },
                        // {
                        //     name: '昨日',
                        //     type: 'bar',
                        //     data: [20,21,32,42,52,63,71,82,93,10]
                        // }
                    ],
                },
            }
        },
        methods: {
            init() {
                this.recordData()
                // this.realRecord()
            },
            async recordData() {
                const {data,count} = await signCensus({page: this.page.currentPage});
                console.log(data)
                this.echarts1_option.series[0].data = data.userChar.map(item => item.count);
                this.echarts1_option.xAxis.data = data.userChar.map(item => item.days);
                this.shujuEch()
                if (data) {
                    this.zhData.userCount = data.userCount
                    this.zhData.todayCount = data.todayCount
                    this.zhData.fen = data.fen
                    this.zhData.count = data.count
                    this.bus.$emit('loading', false)
                    this.tableData = data.row
                    this.page.total = count;
                }
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.recordData();
            },
            shujuEch() {
                let myChart = echarts.init(document.getElementById('shujuEch'))
                myChart.setOption(this.echarts1_option, true)
            },
            handleEdit2(row) {
                if (row.days) {
                    this.$router.push(`/signinlist?days=${row.days}`);
                }
            },
        }
    }
</script>
<style lang="scss" scoped>
    .title6 {
        color: #666;
        font-size: 14px;
    }

    .title35 {
        color: #353535;
    }

    .tongji_icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
</style>
